﻿@namespace BlazorDemo.Pages.CodeSnippets

<CodeSnippetTabbed DocLink="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxCheckBox-1#content-position">
    <CodeSnippetTabPage Text="Razor">@(@"<div>
    <DxCheckBox CssClass=""w-100"" @bind-Checked=""@MultimediaChecked"" Alignment=""@Alignment"" LabelPosition=""@LabelPosition"">Multimedia</DxCheckBox>
</div>
<div>
    <DxCheckBox CssClass=""w-100"" @bind-Checked=""@AirConditioningChecked"" Alignment=""@Alignment"" LabelPosition=""@LabelPosition"">Air Conditioning</DxCheckBox>
</div>
<div>
    <DxCheckBox CssClass=""w-100"" @bind-Checked=""@HeatedSeatsChecked"" Alignment=""@Alignment"" LabelPosition=""@LabelPosition"">Heated Seats</DxCheckBox>
</div>
<div>
    <DxCheckBox CssClass=""w-100"" @bind-Checked=""@ParkingCameraChecked"" Alignment=""@Alignment"" LabelPosition=""@LabelPosition"">Parking Camera</DxCheckBox>
</div>
<div>
    <DxCheckBox CssClass=""w-100"" @bind-Checked=""@DroneChecked"" Alignment=""@Alignment"" LabelPosition=""@LabelPosition"">Drone</DxCheckBox>
</div>

@code  {

    bool MultimediaChecked { get; set; }
    bool AirConditioningChecked { get; set; }
    bool ParkingCameraChecked { get; set; }
    bool HeatedSeatsChecked { get; set; }
    bool DroneChecked { get; set; }

    CheckBoxContentAlignment Alignment { get; set; }
    LabelPosition LabelPosition { get; set; }
}")
    </CodeSnippetTabPage>
    <CodeSnippetTabPage Text="Settings">
@(@"<div>Alignment</div>
<div class=""form-check"">
    <input class=""form-check-input"" type=""radio"" name=""alignment"" id=""align-left"" value=""Align left"" @onclick=""@(() => { Alignment = CheckBoxContentAlignment.Left; })"" checked />
    <label class=""form-check-label"" for=""align-left"">Aligned Left</label>
</div>
<div class=""form-check"">
    <input class=""form-check-input"" type=""radio"" name=""alignment"" id=""align-right"" value=""Align right"" @onclick=""@(() => { Alignment = CheckBoxContentAlignment.Right; })"" />
    <label class=""form-check-label"" for=""align-right"">Aligned Right</label>
</div>
<div class=""form-check"">
    <input class=""form-check-input"" type=""radio"" name=""alignment"" id=""align-center"" value=""Align center"" @onclick=""@(() => { Alignment = CheckBoxContentAlignment.Center; })"" />
    <label class=""form-check-label"" for=""align-center"">Aligned Center</label>
</div>
<div class=""form-check"">
    <input class=""form-check-input"" type=""radio"" name=""alignment"" id=""space-between"" value=""Space between"" @onclick=""@(() => { Alignment = CheckBoxContentAlignment.SpaceBetween; })"" />
    <label class=""form-check-label"" for=""space-between"">Space Between</label>
</div>
<div class=""form-check"">
    <input class=""form-check-input"" type=""radio"" name=""alignment"" id=""space-around"" value=""Space around"" @onclick=""@(() => { Alignment = CheckBoxContentAlignment.SpaceAround; })"" />
    <label class=""form-check-label"" for=""space-around"">Space Around</label>
</div>

<div>Label Position</div>
<div class=""form-check"">
    <input class=""form-check-input"" type=""radio"" name=""label-position"" id=""label-right"" value=""Label right"" @onclick=""@(() => { LabelPosition = LabelPosition.Right; })"" checked />
    <label class=""form-check-label"" for=""align-left"">Label right</label>
</div>
<div class=""form-check"">
    <input class=""form-check-input"" type=""radio"" name=""label-position"" id=""label-left"" value=""Label left"" @onclick=""@(() => { LabelPosition = LabelPosition.Left; })"" />
    <label class=""form-check-label"" for=""align-right"">Label left</label>
</div>")
    </CodeSnippetTabPage>
</CodeSnippetTabbed>
